<template>
    <div class="common-layout">
      <el-container>
        <el-header>
          <div class="title">
            <div class="title-left">
              <div class="title-left-image"></div>
              <el-menu class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" background-color="#545c64"
                       text-color="#fff" active-text-color="#ffd04b">
              <el-menu-item @click="navigateToHotDishes">热菜</el-menu-item>
              </el-menu>
            </div>
          </div>
        </el-header>
        <el-main>
          <div class="main">
            <button @click="getData()">test axios 请求数据</button>
            <p>这是请求到的数据{{testData.list}}</p>
            <router-view />
          </div>
        </el-main>
      </el-container>
    </div>
  </template>

<script>
import API from "../plugins/axiosInstance";
export default {
  name: 'HelloWorld.vue',
  data() {
    return {
      testData: {
        list: []
      },
    };
  },
  methods: {
    getData() {
      API.get('/test')
          .then((res) => {
            alert('请求成功!');
            this.testData.list = res.data.dataList;
          })
          .catch((error) => {
            console.error('请求失败：', error);
          });
    },
    navigateToHotDishes() {
      if (this.$route.path !== '/app') {
        this.$router.push('/app');
      }
    },
  },
}
</script>

<style>
.title {
  margin-left: 0px;
  height: 48px;
  width: 100%;
  background-color: #fff;
  border-bottom: 1px solid #DCDCDC;
  display: flex;
  justify-content: space-between;
}

.title-left {
  width: 580px;
  height: 48px;
  margin-left: 0;
  background: #fff;
  display: flex;

}

.title-left-image {
  height: 48px;
  width: 120px
}

span {
  font-size: 16px
}

a {
  width: 70px;
  height: 48px;
  color: black;
  margin: 0px 10px;
  text-decoration: none;
  line-height: 48px;
  text-align: center
}

a:hover {
  background-color: #BEBEBE;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>


